<template>
  <div>
    <a-form-model ref="correctGroupForm" :rules="rules" :model="localInform">
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="分组名称" prop="name">
        <a-input v-model="localInform.name" allow-clear :maxLength="125" placeholder="请输入分组名称" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="描述">
        <a-input v-model="localInform.remark" allow-clear :maxLength="125" placeholder="请输入描述" />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="组内人员" prop="crctype">
        <a-select
          show-search
          :default-active-first-option="false"
          :show-arrow="false"
          :filter-option="filterOption"
          :not-found-content="null"
          @change="personChange"
          mode="multiple"
          v-model="localInform.personIds"
          placeholder="请选择组内人员"
          allowClear
        >
          <a-select-option v-for="person in allPerson" :key="person.id" :value="person.id">
            {{ person.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item>
        <div class="text-center">
          <a-button class="m-r-8 btn_normal_color" icon="reload" @click="resetForm"> 重置 </a-button>
          <a-button type="primary" class="btn_primary_color" @click="onSubmit" icon="save" :loading="loading">
            保存
          </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import storage from 'store'
import { APP_USER } from '@/store/mutation-types.js'
import { saveOrUpdateGroup } from '@/api/correction/crc_group.js'
import { findAllPerson } from '@/api/correction/crc_person.js'
import { nanoid } from 'nanoid'
import { Decrypt } from '@/enumeration/SM.js'

export default {
  props: {
    infoForm: {
      type: Object,
      default () {
        return {
          id: undefined,
          name: undefined, // 分组名称
          remark: undefined, // 描述
          personIds: [], // 组内人员
          isEdit: false
        }
      }
    }
  },
  data () {
    return {
      currentUser: storage.get(APP_USER), // 登录人信息
      labelCol: { span: 4 }, // label宽
      wrapperCol: { span: 18 }, // 组件宽
      loading: false, // 按钮显示
      /**
      * 添加表单验证规则
      */
      rules: {
        name: [
          { required: true, message: '请输入分组名称', trigger: 'blur' }
        ]
      },
      allPerson: [],
      localInform: {},
      cloneInfoForm: {},
      cloneAllPerson: []
    }
  },
  created () {
    this.findAllPerson()
    this.localInform = JSON.parse(JSON.stringify(this.infoForm))
    this.cloneInfoForm = JSON.parse(JSON.stringify(this.infoForm))
  },
  methods: {
    /**
     * 重置表单
     */
    resetForm () {
        console.log('form', this.$refs.correctGroupForm)
        this.localInform = JSON.parse(JSON.stringify(this.infoForm))
    },

    // 查询全部的社矫对象
    async findAllPerson () {
      this.loading = true
      const res = await findAllPerson()
      if (res.code === 0) {
        // this.allPerson = res.data
        this.allPerson = res.data.map((item) => {
          item.name = Decrypt(item.name)
          return item
        })
        this.cloneAllPerson = JSON.parse(JSON.stringify(this.allPerson))
        console.log('查询全部的社矫对象成功', res.data)
      } else {
        this.$message.error(res.msg)
        console.log('查询全部的社矫对象失败')
      }
      this.loading = false
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    personChange (value) {
      this.localInform.personIds = value
    },
    /**
     * 提交表单
     */
    onSubmit () {
      // 若是新增
      if (!this.localInform.isEdit) {
        this.localInform.id = nanoid()
        this.localInform.createuserid = this.currentUser.userId
        this.localInform.createusername = this.currentUser.fullname
        this.localInform.createtime = this.$moment(new Date()).format('YYYY-MM-DD')
      }
      const copyForm = JSON.parse(JSON.stringify(this.localInform))
      this.$refs.correctGroupForm.validate((valid) => {
        this.loading = true
        if (valid) {
          console.log('submit!', copyForm)
          saveOrUpdateGroup(copyForm).then((res) => {
              if (res.code !== 0) {
              this.$message.error(res.msg)
            } else {
              this.$message.success('保存成功')
              this.$emit('reloadList')
              this.$emit('close')
            }
            this.loading = false
          })
        } else {
          this.loading = false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
